<style>
.toolBar {
  margin-bottom: 10px;
}

.ivu-dropdown {
  margin: 0px;
}

.tCheck {
  padding-left: 10px;
  float: left;
  clear: left;
  z-index: 9999;
}
</style>

<template>
<Row>
  <Row class="toolBar" justify="space-between">
    <Col span="8">
    <Button-group style="float: left">
      <Tooltip v-if="add" content="添加" placement="bottom-start">
        <Button
            type="default"
            @click="addClick()"
          >
            添加
          </Button>
      </Tooltip>

      <Tooltip v-if="editCheck" content="编辑所选" placement="bottom-start">
        <Button
            type="default"
            @click="editCheck()"
          >
            编辑所选
          </Button>
      </Tooltip>
      <Tooltip v-if="saveBtn" content="保存" placement="bottom-start">
        <Button
            type="default"
            @click="saveBtnClicked()"
          >
            保存
          </Button>
      </Tooltip>
      <Tooltip v-if="delCheck" content="删除所选" placement="bottom-start">
        <Button
            type="default"
            @click="delCheckClick()"
          >
            删除所选
          </Button>
      </Tooltip>
      <Tooltip v-if="assign" content="分配资源" placement="bottom-start">
        <Button
            type="default"
            @click="assignClick()"
          >
            分配资源
          </Button>
      </Tooltip>
      <Tooltip v-if="reset" content="重置密码" placement="bottom-start">
        <Button
            type="default"
            @click="resetClick()"
          >
            重置密码
          </Button>
      </Tooltip>
      <Tooltip v-if="apply" content="上报" placement="bottom-start">
        <Button
            type="default"
            @click="applyClick()"
          >
            上报
          </Button>
      </Tooltip>
      <Tooltip v-if="director" content="设置检验员" placement="bottom-start">
        <Button
            type="default"
            @click="directorClick()"
          >
            设置检验员
          </Button>
      </Tooltip>
    </Button-group>
    </Col>
    <Col span="16">
    <Button-group style="float: right;">
      <Tooltip content="刷新" placement="bottom-start">
        <Button
            type="default"
            @click="refresh"
          >
            刷新
          </Button>
      </Tooltip>
      <Tooltip content="导出全部数据" placement="bottom-start">
        <Button
            type="default"
            @click="exportData(1)"
          >
            导出全部数据
          </Button>
      </Tooltip>
      <Tooltip content="导出当前页数据" placement="bottom-start">
        <Button
            type="default"
            @click="exportData(2)"
          >
            导出当前数据
          </Button>
      </Tooltip>
    </Button-group>
    <Input
        v-model="searchKey"
        icon="ios-search-strong"
        placeholder="请输入..."
        style="width:200px;float:right;"
      >
    </Input>
    </Col>
  </Row>
  <Table  size="small" ref="table" :context="self" border stripe :columns="columns" :data="curTableData" :loading="loading" @on-selection-change="selectRow" @on-select="handelSelect" @on-row-dblclick="show" />
  <div style="margin: 10px;overflow: hidden">
    <div style="float: right;">
      <Page :total="total" :current="current" :page-size="pageSize" :page-size-opts="pageSizeOpts" show-elevator show-total show-sizer @on-change="changePage" @on-page-size-change="changeSize" />
    </div>
  </div>
  <Modal v-show="dataShow" v-model="showData" title="查看数据详细信息" class="editm">
    <Form ref="showForm" :model="showItem" :label-width="80">
      <Form-item v-for="(val, key) in showItem" :key="key" :label="key">
        <Input
            :value="val"
            disabled
            :icon="key==='Logo'? val:''"
          ></Input>
      </Form-item>
    </Form>
  </Modal>

</Row>
</template>

<script>
import api from '@/api';
import { inputString } from '@/common/utils';
export default {
  props: {
    loading: false,
    saveBtn: {
      type: Boolean,
      default () {
        return false;
      }
    },
    pageS: {
      type: Number,
      default () {
        return 10;
      }
    },
    dataAll: {
      type: Array,
      default () {
        return [];
      }
    },
    columns: {
      type: Array,
      default () {
        return [];
      }
    },
    dataShow: {
      type: Boolean,
      default () {
        return false;
      }
    },
    add: {
      type: Boolean,
      default () {
        return false;
      }
    },
    director: {
      type: Boolean,
      default () {
        return false;
      }
    },
    delCheck: {
      type: Boolean,
      default () {
        return false;
      }
    },
    assign: {
      type: Boolean,
      default () {
        return false;
      }
    },
    reset: {
      type: Boolean,
      default () {
        return false;
      }
    },
    check: {
      type: Boolean,
      default () {
        return false;
      }
    },
    op: {
      type: Boolean,
      default () {
        return false;
      }
    },
    inst: {
      type: Boolean,
      default () {
        return false;
      }
    },
    apply: {
      type: Boolean,
      default () {
        return false;
      }
    }
  },
  data () {
    return {
      self: this,
      total: 0,
      current: 1,
      pageSize: this.pageS,
      searchKey: '',
      spinShow: false,
      showData: false,
      showItem: {},
      pageSizeOpts: [10, 20, 50, 100],
      selectRows: [], // 选择的数据
      formatColumns: []
    };
  },
  computed: {
    state () {
      return this.$store.state.app;
    },
    padd () {
      let ret = false;
      if (this.add) {
        let data = this.state.router.currentPageName + '-增加';
        // console.log(data);
        for (var e in this.state.menu) {
          if (data === this.state.menu[e].Name) {
            ret = true;
            break;
            // return true
          }
        }
      }
      console.log(ret);
      return ret;
    },
    //        过滤数据表
    filiterTableDate () {
      let fdata;
      if (!this.dataAll) {
        fdata = [];
      } else {
        let e = this.dataAll.slice();
        let keys = this.searchKey;
        let filterData = function (element) {
          if (keys === '') {
            return true;
          }
          for (let o in element) {
            if (String(element[o]).indexOf(keys) >= 0) {
              return true;
            }
          }
          return false;
        };
        fdata = e.filter(filterData);
        this.total = fdata.length;
        if (this.dataAll.length < 1) {
          fdata = this.dataAll;
        }
      }
      return fdata;
    },
    //      当前表数据
    curTableData () {
      // console.log(this.columns)
      if (!this.filiterTableDate) {
        return [];
      }
      let from = this.pageSize * (this.current - 1);
      let to = from + this.pageSize;
      return this.filiterTableDate.slice(from, to);
    }
  },
  mounted () {
    // 修改删除操作按钮
    if (this.op) {
      let op = {
        title: '操作',
        key: 'action',
        width: 150,
        align: 'center',
        render: (h, params) => {
          return h('div', [
            h(
              'Button',
              {
                props: {
                  type: 'primary',
                  size: 'small'
                },
                style: {
                  marginRight: '5px'
                },
                on: {
                  click: () => {
                    this.edit(params.index);
                  }
                }
              },
              '修改'
            ),
            h(
              'Button',
              {
                props: {
                  type: 'error',
                  size: 'small'
                },
                on: {
                  click: () => {
                    this.remove(params.index);
                  }
                }
              },
              '删除'
            )
          ]);
        }
      };
      // this.formatColumns = JSON.parse(JSON.stringify(this.columns)).push(op);
      this.columns.push(op);
    } else {
      // this.formatColumns = JSON.parse(JSON.stringify(this.columns));
    }
    if (this.inst) {
      let inst = {
        title: '操作',
        key: 'action',
        width: 150,
        align: 'center',
        render: (h, params) => {
          return h('div', [
            h(
              'Button',
              {
                props: {
                  type: 'primary',
                  size: 'small'
                },
                style: {
                  marginRight: '5px'
                },
                on: {
                  click: () => {
                    this.edit(params.index);
                  }
                }
              },
              '详情'
            ),
            h(
              'Button',
              {
                props: {
                  type: 'error',
                  size: 'small'
                },
                on: {
                  click: () => {
                    this.getflow(params.index);
                  }
                }
              },
              '流程'
            )
          ]);
        }
      };
      this.columns.push(inst);
    }
    // 多选框
    if (this.check) {
      let ck = {
        type: 'selection',
        width: 60,
        align: 'center'
      };
      this.columns.unshift(ck);
    }

    //      this.getall()
  },
  // watch: {},
  methods: {
    saveBtnClicked () {
      this.$emit('save');
    },
    //        刷新数据
    refresh () {
      this.$emit('refresh');
    },
    //        选择数据
    selectRow (selection) {
      this.selectRows = selection;
    },
    //      改变页码大小
    changeSize (current) {
      this.pageSize = current;
    },
    //      改变页码
    changePage (current) {
      // 这里直接更改了模拟的数据，真实使用场景应该从服务端获取数据
      this.current = current;
    },
    //      导出数据1为原始数据，2为当前数据
    exportData (type) {
      if (type === 1) {
        this.$refs.table.exportCsv({
          filename: '原始数据',
          quoted: true
          //            columns: this.columns.filter((col, index) => index < 5),
          //            data: this.dataAll,
        });
      } else if (type === 2) {
        this.$refs.table.exportCsv({
          filename: '排序和过滤后的数据',
          original: false,
          quoted: false,
          columns: this.columns,
          data: this.curTableData
        });
      }
    },
    //      显示详细记录
    show (row) {
      this.showItem = row;
      this.showData = true;
    },
    //      编辑表格数据
    edit (index) {
      console.log(this.curTableData[index]);
      this.$emit('edit', this.curTableData[index]);
    },
    editCheck () {
      if (this.selectRows.length !== 1) {
        this.$Message.error('生成订单必须选择一个数据进行授权！', 4);
      } else {
        this.$emit('edit', this.selectRows[0]);
      }
    },
    //      编辑表格数据
    getflow (index) {
      console.log(this.curTableData[index]);
      this.$emit('getflow', this.curTableData[index]);
    },
    //      新增
    addClick () {
      this.$emit('add');
    },
    //      授权
    assignClick () {
      // let list = []
      // for (let i = 0; i < this.selectRows.length; i++) {
      //   list.push(this.selectRows[i])
      // }
      this.$emit('assign', this.selectRows);
    },
    //      重置
    resetClick () {
      let list = [];
      for (let i = 0; i < this.selectRows.length; i++) {
        list.push(this.selectRows[i].Id);
      }
      this.$emit('reset', list);
    },
    //      上报
    applyClick () {
      let list = [];
      for (let i = 0; i < this.selectRows.length; i++) {
        list.push(this.selectRows[i]);
      }
      this.$emit('apply', list);
    },
    // 设置部门主管
    directorClick () {
      let list = [];
      for (let i = 0; i < this.selectRows.length; i++) {
        list.push(this.selectRows[i]);
      }
      this.$emit('director', list);
    },
    setOder () {
      if (this.selectRows.length !== 1) {
        this.$Message.error('生成订单必须选择一个数据进行授权！', 4);
      } else {
        this.$emit('setOder', this.selectRows[0]);
      }
    },
    //      删除所选确认
    delCheckClick () {
      if (!this.selectRows || this.selectRows.length < 1) {
        this.$Message.warning('必须选择一个需要删除的项目！');
      } else {
        this.$Modal.confirm({
          title: '删除确认',
          content:
            '<p>请确认此数据删除后，不影响其他功能或人员使用。</p>' +
            '<p>是否继续删除？</p>',
          onOk: () => {
            this.delList(this.selectRows);
          },
          onCancel: () => {}
        });
      }
    },
    //      删除所选
    delList (rows) {
      let list = [];
      for (let i = 0; i < rows.length; i++) {
        list.push(rows[i].Id);
      }
      this.$emit('delCheck', list);
    },
    //      删除确认
    remove (index) {
      this.$Modal.confirm({
        title: '删除确认',
        content:
          '<p>请确认此数据删除后，不影响其他功能或人员使用。</p>' +
          '<p>是否继续删除？</p>',
        onOk: () => {
          this.delete(index);
        },
        onCancel: () => {}
      });
    },
    //      删除
    delete (index) {
      let id = this.curTableData[index].Id;
      this.$emit('del', this.curTableData[index]);
    },
    handelSelect (selection) {
      this.$emit('handelSelect', selection);
    }
  }
};
</script>
